<template>
	<view class="page" :style="{'height':(h-mt)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="领券中心"></c-nav-bar>
		<image v-if="adInfo.bannerList[0].path" mode="widthFix" style="width: 100vw;" :src="adInfo.bannerList[0].path"></image>
		<view class="list" v-if="list.length>0">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item,index) in list" :key="index">
					<view>
						<view class="l_items" style="background-image:https://i.ringzle.com/file/20231225/4964d58a2d184e9596811c7fa96901aa.png" >
							<view class="l_left">
								<view class="ll_price">
									<view class="llp_top">
										<span>￥</span><span>{{item.price}}</span>
									</view>
									<view class="llp_mj" v-if="item.validPrice>0">满{{item.validPrice}}可用</view>
									<view class="llp_mj" v-else>无门槛</view>
								</view>
							</view>
							<view class="l_right">
								<view class="lr_l">
									<view class="lrl_title">{{item.name}}</view>
									<view class="lrl_yxq">领取时间:{{item.validStart}}~{{item.validEnd}}</view>
									<view class="lrl_yxq">范围:{{item.typeNames.slice(0, -1)}}</view>
									<view class="lrl_gz" @tap="showRules(index)">
										<text>使用规则</text>
										<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
									</view>
								</view>
								<view class="lr_r" @tap="toUse(item)">领取</view>
							</view>
						</view>
						<view class="l_rules" v-if="item.select">
							<u-parse :content="item.useRule||'暂无'"></u-parse>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<view class="empty" v-else>
			<image src="https://i.ringzle.com/file/20231225/ef5a846e64b44580aee5b607435042e3.png"></image>
			<text>暂无活动</text>
		</view>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				list:[],
				statusCfg:{0:'去使用',1:'已使用',2:'已过期'},
				page:1,
				showAd:0,
				adInfo:''
			}
		},
		onShow() {
			this.getList();
			this.getAd()
		},
		methods: {
			getAd() {
				this.$api.get('/sys/isappletpic/couponAdvInfo').then(res => {
					if (res.data.code === 0) {
						this.showAd =res.data.data.isShow
						this.adInfo = res.data.data
					}
				})
			},
			//登录成功回调事件
			loginSuccess() {
				this.getList();
			},
			toUse(item){
				this.$api.get(`/sys/discountCoupon/api/${item.id}`).then(res => {
					if (res.data.code === 0) {
						if(res.data.data.is_bind==0){
							uni.showToast({
								icon:'none',
								title:res.data.data.msg
							})
							setTimeout(function() {
								uni.navigateTo({
									url:"/pagesMy/handerUser/handerUser?src=coupon"
								});
							}, 1500);
						}else{
							this.page = 1
							this.list = []
							this.getList();	
							this.$showModal("领取成功");
						}
						
					} else this.$showModal(res.data.msg);
				})
			},
			scrolltolower(){
				this.getList();
			},
			showRules(index){
				this.$set(this.list[index],'select',!this.list[index].select);
			},
			getList(){
				this.$api.get('/sys/discountCoupon/api',{page:this.page}).then(res => {
					if (res.data.code === 0) {
						if(res.data.data.list.length!=0){
							 this.list = [...this.list,...res.data.data.list]
							 this.page++
						}
					} else this.$showModal(res.data.msg);
				})
				// this.list = this.copyList.filter(l=>l.status==this.tidx);
				// this.list.forEach((l,i)=>this.$set(this.list[i],'select',false));
			},
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #fff;
		box-sizing: border-box;
		
		.tabs{
			width: 100%;
			height: 102rpx;
			display: flex;
			background: #FFFFFF;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
			&>view{
				width: calc(100% / 3);
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #777777;
				&.active{
					font-weight: bold;
					color: #007A69;
					&::after{
						content: "";
						width: 90rpx;
						height: 8rpx;
						background: #007A69;
						border-radius: 4rpx;
						position: absolute;
						left: 50%;
						margin-left: -45rpx;
						bottom: 4rpx;
					}
				}
			}
		}
		
		.list{
			width: 100%;
			height: calc(100% - 0rpx);
			padding: 0 24rpx;
			background: #fff;
			box-sizing: border-box;
			overflow-y: auto;
			::v-deep .u-list{
				width: 100%;
				height: 100% !important;
			}
			::v-deep .u-list-item{
				width: 100%;
				margin-top: 20rpx;
			}
			.l_items{
				width: 100%;
				background-image: url(https://i.ringzle.com/file/20231225/4964d58a2d184e9596811c7fa96901aa.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				padding: 12rpx 0;
				.l_left{
					width: 26%;
					height: 100%;
					position: relative;
					.ll_type{
						width: 100%;
						height: 46rpx;
						line-height: 46rpx;
						padding-left: 15rpx;
						box-sizing: border-box;
						background: linear-gradient(87deg, #FFD9D5 0%, #FFF4F3 100%);
						border-radius: 16rpx 0rpx 0rpx 0rpx;
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FD3024;
					}
					.ll_price{
						width: 100%;
						height: calc(100%);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.llp_top{
							display: flex;
							align-items: flex-end;
							span{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #FD3024;
								&:first-child{
									font-size: 36rpx;
								}
								&:last-child{
									font-size: 56rpx;
									line-height: 56rpx;
								}
							}
						}
						.llp_mj{
							margin-top: 13rpx;
							font-size: 22rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FD3024;
						}
					}
				}
				.l_right{
					width: 74%;
					height: 100%;
					padding: 0 16rpx 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.lr_l{
						display: flex;
						flex-direction: column;
						justify-content: center;
						.lrl_title{
							font-size: 30rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							color: #1C1E41;
						}
						.lrl_yxq{
							font-size: 22rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-top: 10rpx;
						}
						.lrl_gz{
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							text{
								font-size: 22rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
							image{
								width: 24rpx;
								height: 24rpx;
								margin-left: 16rpx;
								margin-top: 2rpx;
							}
						}
					}
					.lr_r{
						width: 120rpx;
						height: 46rpx;
						border-radius: 23rpx;
						border: 1rpx solid #FF4141;
						line-height: 46rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #FF4141;
					}
				}
				&.notuse{
					view,text,span{
						color: #AAAAAA !important;
					}
					.ll_type{
						background: #F6F6F6;
					}
					.lr_r{
						border: 1rpx solid #EFEFEF;
					}
				}
			}
			.l_rules{
				width: 100%;
				padding: 20rpx 24rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
				border-radius: 16rpx;
			}
		}
		
		.empty{
			width: 100%;
			height: calc(100% - 261rpx);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 120rpx;
				height: 101rpx;
			}
			text{
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
				margin-top: 39rpx;
			}
		}
		
		.bottom{
			width: 100%;
			height: 139rpx;
			padding-top: 20rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;
			background: #fff;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #007A69;
				}
				image{
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
					margin-top: 4rpx;
				}
			}
		}
	}
</style>